<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>  
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script>
	$(document).ready(function() {
		//聚焦第一个输入框
		$("#name").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate();
	});
	
    $().ready(function() {  
    	$('#add').click(function() {
    	    // select this once into a variable to minimize re-selecting
    	    var $menus = $('#menus');

    	    // clone all selected items
    	    var $items = $.grep($('#allMenus option:selected').clone(), function(v){
    	        // if the item does not exist return true which includes it in the new array
    	        return $menus.find("option[value='" + $(v).val() + "']").length == 0;

    	    });

    	    // append the collection to the destination list
    	    $menus.append($items);
    	    
    	    //part II sort.
    	    var $options = $menus.find('option'); // get all options
            $options = $options.sort(function(a,b){ // sort first by menuOrder then by value
            	var orderA = parseInt($(a).attr("order"));
            	var orderB = parseInt($(b).attr("order"));
            	if(orderA==orderB){
            		return a.value - b.value;
            	}else{
            		return orderA - orderB;
            	}
            });
            $menus.html($options); // add new sorted options to select
    	    
    	    return false;
    	});
    	
        $('#remove').click(function() {  
           	return !$('#menus option:selected').remove();  
        });  
        
        //automatically select all the menus in right side when submit form.
        $('#inputForm').submit(function(){
        	$('#menus option').each(function(i) {  
       	 		 $(this).attr("selected", "selected");  
       		});  
        });
        
     });  
</script>
<div class="row-fluid">
	<div class="span12">
		<sf:form id="inputForm" commandName="role" cssClass="form-horizontal" action="../update">
			<sf:hidden path="id" />
			<div class="control-group">
				<label class="control-label" for="name">角色名:</label>
				<div class="controls">
					<sf:input path="name" cssClass="input-large required" />
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="comment">备注:</label>
				<div class="controls">
					<textarea name="comment" class="input-large"></textarea>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label" for="menus">权限:</label>
				<div class="controls">
					<select id="allMenus" name="allMenus" multiple="true" size="10">
					<c:forEach items="${allMenus }" var="m">
						<option value="${m.id }" order="${m.menuOrder }">${m.displayName }</option>
					</c:forEach>
					</select>
					
					
					<button id="add">--></button>
					<button id="remove">&lt;--</button>
					
					<sf:select path="menus" multiple="true" size="10" >
						<c:forEach items="${menus }" var="m">
						<option value="${m.id }" order="${m.menuOrder }">${m.displayName }</option>
						</c:forEach>
					</sf:select>
				</div>
			</div>
			
			<div class="control-group">
				<label class="control-label" for="btnSave">&nbsp;</label>
				<div class="controls">
					<input id="btnSave" class="btn btn-primary" type="submit" value="Save"> 
					<input id="btnCancel" class="btn" type="button" value="Cancel" onclick="history.back()">
				</div>
			</div>
		</sf:form>
		
	</div><!-- span12 end -->
	
</div> <!-- row-fluid end -->
